<template>
	<view class="container">
		<!-- <view class="top">标题</view> -->
		<view class="middle">
			<view class="bg">
				<image :src="member.avatar | urlFormat" mode="aspectFit" @click="avatar"></image>
				<!-- <text class="btn">{{ member.nickname }}</text> -->
			</view>
			<view class="list">
				<view class="item">
					<text class="name">昵称：</text>
					<input type="text" placeholder="请输入" v-model="member.nickname">
				</view>
			</view>
		</view>
		<view class="bottom" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member:this.$store.state.user
			}
		},
		onShow() { 
			console.log('onshow：',uni.getStorageSync('token'));
			this.$store.dispatch('profile');
			this.member = this.$store.state.user;
			console.log('zzz onshow:',this.member);
		},
		methods: {
			avatar() {
				console.log('上传图片');
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						console.log(res.tempFilePaths[0]);
						// res.tempFilePaths
						that.$http.httpFile({
								url: 'api/member/upload',
								filePath: res.tempFilePaths[0]
							})
							.then(res => {
								let json = JSON.parse(res.data);
								that.member.avatar = json.data.filePath;
							})
							.catch(err => {
								console.log(err);
							});
					},
					fail: err=> {
						console.log(err);
					}
				});
			},
			submit() {
				console.log('修改资料');
				let that = this;
				that.$http.httpReq({url:'api/member/index',token:'',data:that.member,method:'post'})
					.then(res=>{
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500,
							success() {
								setTimeout(function(){
									// uni.navigateBack({
									// 	delta: 1
									// })
									that.$store.dispatch('profile');
								},2000);
							}
						})
					})
					.catch(err=>{
						console.log(res);
					})
			}
		},
		computed: {
			// user() {
			// 	if(this.$store.getters.login){
			// 		return this.$store.getters.user;
			// 	}else{
			// 		return this.member;
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	.container{
		.middle{
			.bg{
				height: 300rpx;
				// height: 100%;
				background: linear-gradient(90deg,#90a4ae,#ffffff,#90a4ae,#ffffff,#90a4ae);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image{
					border-radius: 50%;
					padding: 8rpx;
					text-align: center;
					width: 100rpx;
					height: 100rpx;
				}
			}
			.list{
				margin-top: 20rpx;
				.item{
					padding: 20rpx;
					display: flex;
					border-bottom: 2rpx solid #f0f0f0;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 40rpx;
			width: 90%;
			margin: 0 5%;
			text-align: center;
			background: #06bf12;
			color: #ffffff;
			height: 100rpx;
			line-height: 100rpx;
			&:active{
				color: grey;
			}
		}
	}
</style>
